<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>我的订单</title>
	<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_474420_0o6wv3e9gbbuik9.css">
	<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script type="text/javascript" src="js/fontSize.js"></script>
	<script type="text/javascript" src="js/layer/layer.js"></script>
	<script type="text/javascript" src="js/zepto.min.js"></script>
	<script type="text/javascript" src="js/swiper.min.js"></script>
	<script type="text/javascript" src="js/vue.js"></script>
	<script type="text/javascript" src="js/jweixin-1.2.0.js"></script>
	<script type="text/javascript" src="js/config.js"></script>
	<style type="text/css">
		.order_li{background: #fff;margin:.2rem 0;}
		.order_top{overflow: hidden;position: relative;padding: .3rem;}
		.order_top .order_left{float: left;background: #eeeeee;border-radius: .1rem;display: table;width: 1.8rem;height: 1.8rem;}
		.order_top .order_left span{display: table-cell;vertical-align: middle;text-align: center;}
		.order_top .order_left span img{vertical-align: middle;width: 50%;}
		.order_right{float: left;overflow: hidden;margin-left: .15rem;width: 4.9rem;}
		.order_info{width: 3.65rem;float: left;}
		.order_name{font-size: .28rem;color: #333333;line-height: .42rem;
			 overflow: hidden;
		     text-overflow: ellipsis;
		     display: -webkit-box;
		     -webkit-line-clamp: 4;
		     -webkit-box-orient: vertical;
		}
		.order_size{font-size: .26rem;color: #999;margin-top: .1rem;}
		.order_dece{text-align: right;float: right;width: 1.2rem;}
		.order_dece>li:first-child{font-size: .26rem;color: #333333;}
		.order_dece>li:last-child{font-size: .26rem;color: #999;line-height: .45rem;}
		.order_dece del{font-size: .22rem;color: #999;}
		.order_bottom{position: relative;height: .78rem;line-height: .78rem;text-align: right;padding-right: .3rem;font-size: .24rem;color: #333;}
		.order_bottom1{position: relative;height: .9rem;line-height: .9rem;text-align: right;padding-right: .3rem;font-size: .24rem;color: #333;}
		.order_bottom span{font-size: .3rem;color: #fb597b;}
		.deleteOrder{width: 1.67rem;height: .7rem;border:1px solid #a5a5a5;text-align: center;font-size: .24rem;color: #333333;border-radius: .5rem;background: #fff;}
		.confirmOrder{width: 1.67rem;height: .7rem;border:1px solid #fb597b;text-align: center;font-size: .24rem;color: #fb597b;border-radius: .5rem;background: #fff;}

	</style>
</head>
<body class="bgcolor">
<div id="app">
	<ul class="partTab">
		<li class="active"><span>全部</span></li>
		<li><span>待发货</span></li>
		<li><span>待收货</span></li>
	</ul>
	<div class="tab-content">
		<div class="hidden">
			<ul class="order_ul">
				<li class="order_li">
					<div class="order_top">
						<div class="order_left">
							<span>
								<img src="img/p_58.png" alt="">
							</span>
						</div>
						<div class="order_right">
							<ul class="order_info">
								<li class="order_name">诺心巧克力慕斯奶油蛋糕/情别定制版本</li>
								<li class="order_size">规格：鹅黄杏色</li>
							</ul>
							<ul class="order_dece">
								<li>￥480.00</li>
								<li><del>￥960.00</del></li>
								<li>x2</li>
							</ul>
						</div>
					</div>
					<div class="order_bottom borderTop">
						共2件商品 合计：<span>￥960.00</span>（含运费￥0.00）
					</div>
					<div class="order_bottom1 borderTop">
						<button type="button" class="deleteOrder">删除订单</button>
					</div>
				</li>
			</ul>
			
		</div>
		<div class="hidden">
			<ul class="order_ul">
				<li class="order_li">
					<div class="order_top">
						<div class="order_left">
							<span>
								<img src="img/p_58.png" alt="">
							</span>
						</div>
						<div class="order_right">
							<ul class="order_info">
								<li class="order_name">诺心巧克力慕斯奶油蛋糕/情别定制版本</li>
								<li class="order_size">规格：鹅黄杏色</li>
							</ul>
							<ul class="order_dece">
								<li>￥480.00</li>
								<li><del>￥960.00</del></li>
								<li>x2</li>
							</ul>
						</div>
					</div>
					<div class="order_bottom borderTop">
						共2件商品 合计：<span>￥960.00</span>（含运费￥0.00）
					</div>
				</li>
			</ul>
		</div>
		<div>
			<ul class="order_ul">
				<li class="order_li">
					<div class="order_top">
						<div class="order_left">
							<span>
								<img src="img/p_58.png" alt="">
							</span>
						</div>
						<div class="order_right">
							<ul class="order_info">
								<li class="order_name">诺心巧克力慕斯奶油蛋糕/情别定制版本</li>
								<li class="order_size">规格：鹅黄杏色</li>
							</ul>
							<ul class="order_dece">
								<li>￥480.00</li>
								<li><del>￥960.00</del></li>
								<li>x2</li>
							</ul>
						</div>
					</div>
					<div class="order_bottom1 borderTop">
						<button type="button" class="confirmOrder">确认收货</button>
					</div>
				</li>
			</ul>
		</div>
	</div>
	

</div>
<script type="text/javascript">
	 var app = new Vue({
			el: '#app',
			data: {
			    list:[],
		        unionid:GetQueryString("unionid"),
		        flag:false
		       
			},
			mounted(){
			  
			},
			methods:{
				toogle:function(){
					this.flag=!this.flag;
				}
			}
		});
</script>	
</body>
</html>